@model WorkflowViewModel
@using OrchardCore.Workflows.Models;
@inject OrchardCore.Modules.ILocalClock LocalClock

<zone Name="Title"><h1>@RenderTitleSegments(Model.WorkflowType.Name)</h1></zone>

<zone name="Breadcrumbs">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a asp-action="Index" asp-controller="WorkflowType">@T["Workflows"]</a></li>
            <li class="breadcrumb-item"><a asp-action="Edit" asp-controller="WorkflowType" asp-route-id="@Model.WorkflowType.Id">@Model.WorkflowType.Name</a></li>
            <li class="breadcrumb-item"><a asp-action="Index" asp-controller="Workflow" asp-route-workflowtypeid="@Model.WorkflowType.Id">@T["Instances"]</a></li>
            <li class="breadcrumb-item active" aria-current="page">@Model.Workflow.WorkflowId</li>
        </ol>
    </nav>
</zone>



<nav class="mb-3">
    <ul class="nav nav-pills" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="workflow-tab" data-bs-toggle="pill" href="#workflow" role="tab" aria-controls="workflow" aria-selected="true">Workflow</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="state-tab" data-bs-toggle="pill" href="#state" role="tab" aria-controls="state">@T["State"]</a>
        </li>
        @*TODO: Enable this when workflow logging is implemented.*@
        @*<li class="nav-item">
                <a class="nav-link" id="log-tab" data-bs-toggle="pill" href="#log" role="tab" aria-controls="log">Log</a>
            </li>*@
    </ul>
</nav>

<div class="tab-content">
    <div id="workflow" class="tab-pane active" role="tabpanel" aria-labelledby="workflow-tab">
        <div class="card mb-3 workflow-details">
            <div class="card-body">
                <div class="row">
                    <div class="col">
                        <label>@T["Workflow ID"]</label>
                        <span>@Model.Workflow.WorkflowId</span>
                    </div>
                    <div class="col">
                        <label>@T["Created"]</label>
                        <span>@await LocalClock.ConvertToLocalAsync(Model.Workflow.CreatedUtc)</span>
                    </div>
                    <div class="col">
                        <label>@T["Status"]</label>
                        <span>@T.GetLocalizedStatus(Model.Workflow.Status)</span>
                    </div>
                    @if (Model.Workflow.Status == WorkflowStatus.Faulted)
                    {
                        <div class="col">
                            <label>@T["Fault Message"]</label>
                            <span>@Model.Workflow.FaultMessage</span>
                        </div>
                    }
                    <div class="col">
                        <label>@T["Correlation ID"]</label>
                        <span>@(Model.Workflow.CorrelationId ?? "None")</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="mb-3">
            <div class="workflow-container">
                <div class="workflow-canvas-container">
                    <div class="workflow-canvas" data-workflow-type="@Model.WorkflowTypeJson">
                        @foreach (var activityShape in Model.ActivityDesignShapes)
                        {
                            @await DisplayAsync(activityShape)
                        }
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="state" class="tab-pane" role="tabpanel" aria-labelledby="state-tab">
        <textarea asp-for="WorkflowJson" hidden>@Html.Raw(@Model.WorkflowJson)</textarea>
        <div class="editorContanner" id="@Html.IdFor(x => x.WorkflowJson)_editor"></div>
    </div>
    @*TODO: Enable this when workflow logging is implemented.*@
    @*<div id="log" class="tab-pane" role="tabpanel" aria-labelledby="log-tab">
            <div class="card">
                <div class="card-body">
                    Pretty LOG goes here...
                </div>
            </div>
        </div>*@
</div>
<div class="mb-3">
    <a class="btn btn-secondary" asp-route-action="Index" asp-route-workflowTypeId="@Model.WorkflowType.Id">@T["Back"]</a>
    <a class="btn btn-danger" data-message="@T["Are you sure you want to delete this workflow instance?"]" data-url-af="RemoveUrl UnsafeUrl" asp-action="Delete" asp-route-id="@Model.Workflow.Id">@T["Delete"]</a>
</div>
<style at="Head">
    .editorContanner{
        height:500px;
        height: calc(100vh - 310px);
    }
</style>
<style asp-name="jsplumbtoolkit-defaults"></style>
<style asp-src="~/OrchardCore.Workflows/Styles/orchard.workflows-viewer.min.css" debug-src="~/OrchardCore.Workflows/Styles/orchard.workflows-viewer.css"></style>
<script asp-name="bootstrap" version="4" at="Foot"></script>
<script depends-on="jsplumb" asp-src="~/OrchardCore.Workflows/Scripts/orchard.workflows-viewer.min.js" debug-src="~/OrchardCore.Workflows/Scripts/orchard.workflows-viewer.js" at="Foot"></script>
<script asp-name="monaco" depends-on="admin" at="Foot"></script>
<script at="Foot" depends-on="monaco">
    $(document).ready(function () {
        require(['vs/editor/editor.main'], function () {

            var settings =  {
                automaticLayout:true,
                language:"json",
                autoDetectHighContrast:true
            }

            var html = document.getElementsByTagName("html")[0];
            const mutationObserver = new MutationObserver(setTheme);
            mutationObserver.observe(html, { attributes: true });

            function setTheme() {
                var theme = html.dataset.theme;
                if (theme === "darkmode") {
                    monaco.editor.setTheme('vs-dark')
                } else {
                    monaco.editor.setTheme('vs')
                }
            }

            setTheme();

            var editor = monaco.editor.create(document.getElementById('@Html.IdFor(x => x.WorkflowJson)_editor'), settings);
            var textArea = document.getElementById('@Html.IdFor(x => x.WorkflowJson)');

            const shortcodesAction = {
                id: "shortcodes",
                label: "Add Shortcode",
                run: function (editor) {
                    shortcodesApp.init(function (value) {
                        if (value) {
                            var selection = editor.getSelection();
                            var text = value;
                            var op = { range: selection, text: text, forceMoveMarkers: true };
                            editor.executeEdits("shortcodes", [op]);
                        }
                        editor.focus();
                    })
                },
                contextMenuGroupId: 'orchardcore',
                contextMenuOrder: 0,
                keybindings: [
                    monaco.KeyMod.Alt | monaco.KeyCode.KEY_S,
                ]
            }
            editor.addAction(shortcodesAction);

            editor.getModel().setValue(textArea.value);

        });
    });
</script>
